Det finns två viktiga saker du behöver veta: målningsordningen och staplingskontexten. Om du hänvisar till specifikationen kan du hitta hur och när element målas.
Staplingskontexter bildade av placerade ättlingar med negativa z-index (exklusive 0) i z-indexordning (mest negativa först) sedan trädordning.
Alla placerade, opacitet eller transformera ättlingar, i trädordning som faller inom följande kategorier:
Alla placerade ättlingar med 'z-index: auto' eller 'z-index: 0', i trädordning.
Staplingskontexter bildade av placerade ättlingar med z-index större än eller lika med 1 i z-indexordning (minsta först) sedan trädordning.
Av detta framgår att vi först målar element med negativt z-index i steg (3), sedan det med z-index lika med 0 i steg (8) och slutligen de med positivt z-index i steg (9) , vilket är logiskt. Vi kan också läsa i en annan del av specifikationen:
Varje ruta tillhör ett staplingskontext. Varje ruta i ett givet staplingskontext har en heltal stapelnivå, vilket är dess position på z-axeln i förhållande till andra rutor i samma staplingskontext. Lådor med högre stacknivåer är alltid formaterade framför lådor med lägre stacknivåer. Lådor kan ha negativa stacknivåer. Lådor med samma stapelnivå i staplingssammanhang staplas från botten till topp enligt dokumentträdets ordning.
Också
Ett element som skapar en lokal staplingskontext genererar en ruta som har två stapelnivåer: en för staplingskontexten som den skapar (alltid 0) och en för staplingskontext som den tillhör (ges av z-index-egenskapen).
För att förstå när varje element ska målas måste du känna till dess staplingskontext och dess stacknivå i detta staplingskontext (definierat av z-index). Du måste också veta om det elementet skapar ett staplingskontext. Detta är den knepiga delen, eftersom inställning av z-index kommer att göra detta:
För en placerad ruta anger egenskapen z-index:
Stacknivån för rutan i det aktuella staplingskontexten.
Huruvida rutan skapar ett staplingskontext
Värden har följande betydelser:

Detta heltal är stapelnivån för den genererade rutan i det aktuella staplingskontexten. Rutan skapar också ett nytt staplingskontext.
bil
Stacknivån för den genererade rutan i det aktuella staplingskontexten är 0. Rutan skapar inte ett nytt staplingskontext om det inte är rotelementet.
Nu har vi all information för att bättre förstå varje fall. Om det överordnade elementet har ett z-indexvärde på något annat än auto, kommer det att skapa ett staplingskontext, så att barnelementet kommer att målas inuti vad deras z-index är (negativt eller positivt). Z-index för barnelementet berättar helt enkelt för oss vilken ordning målningen är inne i det överordnade elementet (detta täcker din andra punkt).
Om bara barnelementet har ett positivt z-index och vi inte sätter något på det överordnade elementet, så kommer barnet att målas senare (i steg (9)) och föräldern i steg (8) med tanke på målningsordningen. Det enda logiska sättet att måla föräldern ovan är att öka z-indexet, men genom att göra detta kommer vi att falla in i det föregående fallet där föräldern skapar ett staplingskontext och barnelementet tillhör det.
Det finns inget sätt att ha föräldern ovanför ett barnelement när man ställer in ett positivt z-index för barnet. Det finns inte heller något sätt att ha föräldern ovanför barnet om vi ställer in ett z-index på det överordnade elementet som skiljer sig från auto (antingen positivt eller negativt) .1
Det enda fallet där vi kan ha ett barn under dess förälder är att ställa in ett negativt z-index på underelementet och hålla föräldern vid z-index: auto, så den här skapar inte ett staplingskontext och efter målningsordningen barnet målas först.
Förutom z-index finns det andra egenskaper som skapar en staplingskontext. Om du står inför en förväntad staplingsordning måste du också ta hänsyn till dessa egenskaper för att se om det skapas ett staplingskontext.
Några viktiga fakta som vi kan dra slutsatsen från ovanstående:
Staplingskontexter kan ingå i andra staplingskontexter och tillsammans skapa en hierarki av staplingskontexter.
Varje staplingskontext är helt oberoende av sina syskon: endast efterkommande element beaktas när stapling bearbetas.
Varje staplingskontext är fristående: efter att elementets innehåll har staplats betraktas hela elementet i staplingsordningen för det överordnade staplingskontexten. ref
1: det finns några hackiga sätt om vi överväger att använda 3D-transformation.
Exempel med ett element som går under dess överordnade element även om det här har ett z-index specificerat.
.låda {
position: relativ;
z-index: 0;
höjd: 80px;
bakgrund: blå;
transform-style: preserve-3d; /* Det här är viktigt */
}
.box> div {
marginal: 0 50px;
höjd: 100px;
bakgrund: röd;
z-index: -1; / * det här gör ingenting * /
transformera: translateZ (-1px); / * detta kommer att göra magi* /
}

 

Ett annat exempel där vi kan placera ett element mellan två element i ett annat staplingskontext:
.låda {
position: relativ;
z-index: 0;
höjd: 80px;
bakgrund: blå;
}
.box> div {
marginal: 0 50px;
höjd: 100px;
bakgrund: röd;
z-index: 5;
transform: translateZ (2px);
}
.utanför {
höjd: 50px;
bakgrund: grön;
marginal: -10px 40px;
transform: translateZ (1px);
}
kropp {
transform-style: preserve-3d;
}

 

 
Vi kan också ha en galen staplingsordning som nedan:
.låda {
bredd: 100px;
höjd: 100px;
position: absolut;
}
kropp {
transform-style: preserve-3d;
}
 
 
 
 
Vi bör notera att användning av sådan hack kan ha en viss bieffekt på grund av att transform-stil, perspektiv och transform kommer att påverka position: absolut / fast element. Relaterat: CSS-filter på förälder bryter barnpositionering
10
|
Ett bra sätt att tänka på detta är att varje förälder innehåller sitt eget staplingskontext. Syskonelement delar föräldrars staplingsordning och kan därför överlappa varandra.
Ett underordnat element får ALLTID ett staplingskontext baserat på dess förälder. Därav behovet av ett negativt z-indexvärde för att driva barnet "bakom" sitt föräldra (0) staplingskontext.
Det enda sättet att ta bort ett element från föräldrarnas sammanhang är att använda position: fast eftersom detta väsentligen tvingar det att använda fönstret för kontext.
1
|
I Mozilladokumentationen står det
Z-index CSS-egenskapen ställer in z-ordningen för ett placerat element och dess ättlingar eller flexobjekt.
Här är ytterligare logik från en annan StackOverflow-artikel om barn kontra ättlingar.
2
|
Hur kan jag förstå detta beteende genom logik?
För mig är det svårt att förstå ditt problem med logik. En förälder innehåller sina barn. En skål kan täckas av en annan skål. Men du kan inte täcka soppan med skålen om du inte lägger soppan ur skålen.
z-Index anger ordningen för överlappande element. En förälder kan inte överlappa sitt barn.
ImhO det är helt logiskt.
|
Ditt svar
StackExchange.ifUsing ("redaktör", funktion () {
StackExchange.using ("externalEditor", funktion () {
StackExchange.using ("snippets", function () {
StackExchange.snippets.init ();
});
});
}, "kodutdrag");
StackExchange.ready (funktion () {
var channelOptions = {
taggar: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("externalEditor", funktion () {
// Måste aktivera redaktören efter utdrag, om utdrag aktiverade
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("snippets", function () {
createEditor ();
});
}
annat {
createEditor ();
}
});
funktion createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: falsk,
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: sant,
showLowRepImageUploadWarning: true,
reputToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Drivs av \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.72543 4.916.56 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419C414.42.0.412.6.6 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.545.5 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenod = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9913.4279.4670.46 .1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 13.913 27.4607 13.4902 28.1109 12.6616C28.1109 12.7229 28.1161 12.779928,121 12.8346C28.1256 12,8854 28,1301 12,9342 28,1301 12.983C28.1301 14,4373 27,2502 15,2321 25,777 15.2321C24.8349 15,2321 24,1352 14,9821 23,5661 14.7787C23.176 14,6393 22,8472 14,5218 22,5437 14.5218C21.7977 14,5218 21,2429 15,0123 21,2429 15.6887C21.2429 16,7375 22,9072 17,6335 25,6622 17,6335 ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.131779 \ 8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98380 13.312.666 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.00066 6.59049V11.9512C5.00066 13.2535 5.47873 13.8962 6.51203 13.8962C7.54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 13.8962 12.4013.513 13.52 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d = \" M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354.521 5.213354 5.221 13.8962 1.82471 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \ "/ \ u003e \ u003cpath d = \" M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822846 3.56676 3.57676 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \" # 1BB76E \ "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e",
contentPolicyHtml: "Användarbidrag licensierade under \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (content policy) \ u003c / a \ u003e",
allowUrls: sant
},
onDemand: sant,
discardSelector: ".discard-answer"
, direktShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
Tack för att du bidrog med ett svar till Stack Overflow!
Var noga med att svara på frågan. Ge detaljer och dela din forskning!
Men undvik ...
Be om hjälp, förtydligande eller svara på andra svar.
Att göra uttalanden baserade på åsikt; säkerhetskopiera dem med referenser eller personlig erfarenhet.
För att lära dig mer, se våra tips för att skriva bra svar.
Utkast sparat
Utkast kasseras
Registrera dig eller logga in
StackExchange.ready (funktion () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Registrera dig med Google
Registrera dig med Facebook
Registrera dig med e-post och lösenord
Skicka in
Lägg upp som gäst
namn
E-post
Obligatoriskt men aldrig visat
StackExchange.ready (
funktion () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f54897916% 2fwhy-cant-an-element-with-az-index-value-cover-its- barn% 23new-answer ',' question_page ');
}
);
Lägg upp som gäst
namn
E-post
Obligatoriskt men aldrig visat
Lägg upp ditt svar
Kassera
Genom att klicka på “Lägg upp ditt svar” godkänner du våra användarvillkor, sekretesspolicy och cookiepolicy
Inte svaret du letar efter? Bläddra bland andra frågor taggade css css-position z-index eller ställ din egen fråga.